<template>
  <div class="manager-container">
    <div class="manager-operational">
      <el-autocomplete
          :trigger-on-focus="true"
          :fetch-suggestions="querySearch"
          placeholder="请输入社团名"
          v-model="societyName"
          @select="handleSelect"
          style="width: 400px;">
        <el-button slot="append" type="primary" class="el-input-button" @click="addSocietyAdmin">添加新社团管理员</el-button>
        <template slot-scope="{ item }">
          <div style="display: flex;flex-flow: row nowrap;justify-content: space-between">
            <span>{{ item.title }}</span>
            <span>
              <el-tag v-if="item.haveAdmin" size="mini">已有管理员</el-tag>
              <el-tag v-else type="danger" size="mini">无管理员</el-tag>
            </span>
          </div>
        </template>
      </el-autocomplete>
      <!-- 搜索框 -->
      <el-input placeholder="根据社团名搜索" v-model="searchInput" style="width: 400px;margin: 0 20px">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>

      <el-button type="danger" @click="deleteSocietyAdmins(selectedData)">删除选中</el-button>
    </div>
    <!--  展示社团管理员数据  -->
    <el-table
        :data="societyAdmins"
        stripe
        style="width: 100%;margin: 20px 0"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="creationTime"
          label="创建日期"
          width="120">
        <template v-slot="{row}">
          <span>{{ $dayjs(row.creationTime * 1).format('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="username"
          label="账号">
      </el-table-column>
      <el-table-column
          prop="password"
          label="密码">
      </el-table-column>
      <el-table-column
          prop="title"
          label="社团">
      </el-table-column>
      <el-table-column
          label="操作">
        <template v-slot="{row}">
          <div class="admin_handle">
            <el-button type="primary" @click="copyAdminInfo(row)">复制账号信息</el-button>
            <el-button type="danger" @click="deleteSocietyAdmins([row.id])">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!--  分页器  -->
    <el-pagination
        background
        layout="sizes, prev, pager, next"
        :page-size="pagination.limit"
        :page-sizes="[10, 15, 20]"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pagination.pageNo"
        style="text-align: center">
    </el-pagination>
  </div>
</template>

<script>
import {addNewAdmin, getAllAdmin} from '@/api/user';
import dayjs from 'dayjs';
import {mapGetters} from "vuex";

export default {
  name: "Manager",
  data() {
    return {
      dialogVisible: false, // 添加新社团管理员对话框开关
      societyName: '', // 接收添加社团管理员的社团名
      selectSocietyId: null,
      selectedData: [], // 被选中的数据
      searchInput: '',
      // 分页器数据
      pagination: {
        total: 0,
        limit: 10,
        pageNo: 1
      },

    }
  },
  mounted() {
    this.getAdminsInfo();
    this.$store.dispatch('society/getInfo', {pageNo: 1, limit: 99});
  },
  methods: {
    dayjs,
    // 删除单个/多个社团管理员
    deleteSocietyAdmins(ids){
      this.$store.dispatch('user/deleteSocietyAdmin',ids).then(()=>{
        this.getAdminsInfo();
      })
    },
    // 添加社团管理员
    async addSocietyAdmin() {
      if (this.selectSocietyId) {
        this.$store.dispatch('user/addSocietyAdmin',this.selectSocietyId).then(()=>{
          this.getAdminsInfo();
          this.$store.dispatch('society/getInfo', {pageNo: 1, limit: 99});
        })
        this.selectSocietyId = null;
        this.societyName = '';
      }
    },
    // 获取社团管理员数据
    async getAdminsInfo() {
      let {pageNo, limit} = this.pagination;
      this.$store.dispatch('user/getAllSocietyAdmins',{pageNo, limit});
    },
    // 改变选中的数据
    handleSelectionChange(rows) {
      let selectedData = [];
      rows.forEach(item => {
        selectedData.push(item.id);
      });
      this.selectedData = selectedData; // 用中间变量改变data的值，让vue能响应
    },
    // 改变分页器每页size
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // 改变分页器页数
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 搜索输入建议
    querySearch(queryString, cb) {
      let restaurants = this.societyInfo;
      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 选中输入建议回调
    handleSelect(queryString) {
      this.societyName = queryString.title;
      this.selectSocietyId = queryString.id;
    },
    copyAdminInfo(row) {
      navigator.clipboard.writeText(`账号：${row.username}  密码：${row.password}`).then(
          ()=> {
            this.$message.success("复制成功")
          }
      )
    },
  },
  computed: {
    ...mapGetters(['societyInfo','societyAdmins']),
  }
};
</script>

<style scoped lang="scss">
.manager {
  &-container {
    padding: 30px;

    // 页面上方操作区
    .manager-operational {
      display: flex;
      flex-flow: row nowrap;


    }

    .el-input-button {
      background-color: #409EFF;
      color: white;
      border-radius: 0;

      &:hover, &:focus {
        background-color: #66b1ff;
      }

      &:active {
        background-color: #428ac9;
      }
    }

    .admin_handle {
      display: flex;
      flex-flow: row nowrap;
    }

    .search-suggest{
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
    }
  }
}
</style>
